import React, {useReducer, useState} from 'react';

const reducer = (state = {}, action) => {
    console.log(action);
    state[action.type] = action.payload;
    return {...state, [action.type]: action.payload};
}

const UseReducer = () => {
    const [count, setCount] = useState(0)

    const [state, dispatch] = useReducer(reducer, {"count": 1});
    return (
        <div>
            <div>
                <h1>UseState 当前数量 {count}</h1>
                {
                    [1,2,3,10].map((item, index) => (
                        <button key={index} onClick={() => setCount(count + item)}>+{item}</button>
                    ))
                }
            </div>
            <div>
                <h1>UseReducer 当前数量 {state.count}</h1>
                {
                    [1,2,3,10].map((item, index) => (
                        <button key={index} onClick={() => dispatch({type: 'count', payload: state.count + item})}>+{item}</button>
                    ))
                }
            </div>
        </div>
    );
};

export default UseReducer;